<template>
	<head-f></head-f>
	<view class="content">
		<view class="uni-margin-wrap">
			<swiper class="swiper index-swiper" circular autoplay>
				<swiper-item>
					<view class="swiper-item ">
						<image src="../../common/images/demo.png"></image>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item ">
						<image src="../../common/images/woman.jpg"></image>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item ">
						<image src="../../common/images/内容001.png"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>


		<view class="notice">
			<view class="left">
				<uni-icons type="sound-filled" size="30rpx"></uni-icons>
				<text class="text">公告</text>
			</view>
			<view class="center">
				<swiper vertical autoplay interval="1500" duration="300" circular>
					<swiper-item>
						11111111111111111111111111111111111111111111111111111111111111111
					</swiper-item>
					<swiper-item>
						2
					</swiper-item>
					<swiper-item>
						3
					</swiper-item>
				</swiper>
			</view>
			<view class="right">
				<uni-icons type="right" size="16" color="#333"></uni-icons>
			</view>
		</view>


		<view class="index-select">
			<common-title>
				<template #index-title>每日推荐</template>
				<template #index-custom>
					<view class="date">
						<uni-icons type="calendar" size="18rpx"></uni-icons>
						<view class="text">
							<!-- <uni-dateformat :date="Date.now()" format="dd日"></uni-dateformat> -->
							<text>{{Mydates()}}</text>日
						</view>
					</view>
				</template>
			</common-title>
			<view class="contents">
				<scroll-view scroll-x>
					<view class="box">
						<image src="../../common/images/woman.jpg" mode="aspectFill"></image>
						<image src="../../common/images/woman.jpg" mode="aspectFill"></image>
						<image src="../../common/images/woman.jpg" mode="aspectFill"></image>
						<image src="../../common/images/woman.jpg" mode="aspectFill"></image>
						<image src="../../common/images/woman.jpg" mode="aspectFill"></image>
					</view>
				</scroll-view>
			</view>
		</view>


		<view class="index-goods">
			<navigator url="/pages/detailed/detailed">
				<view class="index-goods-details">
					<view>
						<image src="../../common/images/pexels.jpg"></image>
					</view>
					<view>
						<text>毛孩站起来</text>
						<br>
						<text>好用耐用非常好火爆热品111111111111111111111111</text>
					</view>
					<view>
						<text>$330</text>
						<view>
							<uni-icons class="index-icon" type="cart" size="40rpx"></uni-icons>
						</view>
					</view>
				</view>
			</navigator>
			<navigator url="/pages/detailed/detailed">
				<view class="index-goods-details">
					<view>
						<image src="../../common/images/pexels.jpg"></image>
					</view>
					<view>
						<text>毛孩站起来</text>
						<br>
						<text>好用耐用非常好火爆热品111111111111111111111111</text>
					</view>
					<view>
						<text>$330</text>
						<view>
							<uni-icons class="index-icon" type="cart" size="40rpx"></uni-icons>
						</view>
					</view>
				</view>
			</navigator>
			<navigator url="/pages/detailed/detailed">
				<view class="index-goods-details">
					<view>
						<image src="../../common/images/pexels.jpg"></image>
					</view>
					<view>
						<text>毛孩站起来</text>
						<br>
						<text>好用耐用非常好火爆热品111111111111111111111111</text>
					</view>
					<view>
						<text>$330</text>
						<view>
							<uni-icons class="index-icon" type="cart" size="40rpx"></uni-icons>
						</view>
					</view>
				</view>
			</navigator>
			<navigator url="/pages/detailed/detailed">
				<view class="index-goods-details">
					<view>
						<image src="../../common/images/pexels.jpg"></image>
					</view>
					<view>
						<text>毛孩站起来</text>
						<br>
						<text>好用耐用非常好火爆热品111111111111111111111111</text>
					</view>
					<view>
						<text>$330</text>
						<view>
							<uni-icons class="index-icon" type="cart" size="40rpx"></uni-icons>
						</view>
					</view>
				</view>
			</navigator>
			<navigator url="/pages/detailed/detailed">
				<view class="index-goods-details">
					<view>
						<image src="../../common/images/pexels.jpg"></image>
					</view>
					<view>
						<text>毛孩站起来</text>
						<br>
						<text>好用耐用非常好火爆热品111111111111111111111111</text>
					</view>
					<view>
						<text>$330</text>
						<view>
							<uni-icons class="index-icon" type="cart" size="40rpx"></uni-icons>
						</view>
					</view>
				</view>
			</navigator>


		</view>

		<foot></foot>


	</view>
</template>


<script>
	export default {
		data() {
			return {

			}
		},

		mounted() {

		},
		methods: {
			Mydates: function() {
				const Mydate = new Date()
				return Mydate.getDate()
			}
		}
	}
</script>




<style lang="scss" scoped>
	.content {
		width: 750rpx;

		box-sizing: border-box;
		overflow: hidden;
		padding: 10px;
	}


	.uni-margin-wrap {
		margin-top: 140rpx;
	}


	.index-swiper {
		margin-top: 10px;
		height: 400rpx;
		border-radius: 10px;
		overflow: hidden;
	}

	.swiper-item {
		position: relative;
		width: 750rpx;
		height: 400rpx;
		overflow: hidden;
		text-align: center;

		image {
			position: absolute;
			top: 50%;
			left: 50%;
			display: block;
			min-width: 100%;
			min-height: 100%;
			transform: translate(-50%, -50%);
		}
	}

	.notice {
		width: 690rpx;
		height: 80rpx;
		line-height: 80rpx;
		background: #F9F9F9;
		margin: 0 auto;
		border-radius: 80rpx;
		display: flex;
		margin-top: 10rpx;

		.left {
			width: 140rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			:deep() {
				.uni-icons {
					color: #28B389 !important;
				}
			}

			.text {
				color: #28B389;
				font-weight: 600;
				font-size: 28rpx;
			}
		}

		.center {
			flex: 1;

			swiper {
				height: 100%;

				&-item {
					height: 100%;
					font-size: 30rpx;
					color: #B6B6B6;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
			}
		}

		.right {
			width: 70rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	.index-select {
		margin-top: 30px;

		.date {
			color: green;
			display: flex;
			align-items: center;

			:deep() {
				.uni-icons {
					color: #28B389 !important;
				}
			}

			.text {
				margin-left: 5rpx;
				color: #28B389;

				text {
					color: #28B389;
				}
			}
		}

		.contents {
			width: 720rpx;
			margin-top: 30rpx;

			scroll-view {
				white-space: nowrap;

				.box {
					width: 200rpx;
					height: 430rpx;
					display: inline-block;
					margin-right: 15rpx;

					image {
						width: 100%;
						height: 100%;
						border-radius: 10rpx;
						padding-right: 8px;
					}
				}

				.box:last-child {
					margin-right: 30rpx;
				}
			}
		}
	}

	.index-goods {
		width: 100%;
		overflow: hidden;
		text-align: center;

		.index-goods-details {
			border-radius: 8rpx;
			// overflow: hidden;
			float: left;
			height: 450rpx;
			background-color: #F9F9F9;
			width: 345rpx;
			display: flex;
			flex-direction: column;
			justify-content: flex-start;

			margin-bottom: 20rpx;
			align-items: center;
		}

		.index-goods-details>:nth-child(1) {
			width: 60%;
			height: 300rpx;
			background-color: sandybrown;
			margin-top: 8rpx;

			image {
				width: 100%;
				height: 100%;
				overflow: hidden;
				border-radius: 5rpx;
			}
		}

		.index-goods-details>:nth-child(2) {
			margin-top: 4rpx;

			>text:nth-child(1) {
				color: #a5a5a5;
				font-size: 26rpx;
			}

			>text:nth-child(3) {
				width: 320rpx;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				overflow: hidden;
				margin-top: 4rpx;
			}
		}

		.index-goods-details>:nth-child(3) {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;

			text {
				color: #F15864;
				font-weight: 700;
				font-size: 30rpx;
				float: left;
				transform: translateX(90%);
				margin-top: 7rpx;
			}

			view {
				width: 50rpx;
				height: 50rpx;
				border-radius: 50%;
				background-color: #806E9B;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-right: 30rpx;

				.index-icon {
					transform: translateX(-3%);
				}
			}
		}

		>:nth-child(2n) {
			margin-left: 15rpx;
			float: right;
		}
	}

	.index-wall {
		display: block;
		width: 100%;
	}
</style>